<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优榜样</title>
    <link rel="stylesheet" href="../../addons/party_member/public/css/weui.min.css">
    <link rel="stylesheet" href="../../addons/party_member/public/css/jquery-weui.min.css">

    <!-- body 最后 -->
    <script src="../../addons/party_member/public/js/jquery.min.js"></script>
    <script src="../../addons/party_member/public/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="../../addons/party_member/public/js/swiper.min.js"></script>
    <script src="../../addons/party_member/public/js/city-picker.min.js"></script>
    <script src="../../addons/party_member/public/js/function.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f9f9f9;
        }

        .head {
            display: block;
            position: relative;
            width: 100%;
            height: 43px;
            background: #ffffff;
            text-align: center;
            font-size: 18px;
            line-height: 43px;
            font-family: -webkit-body;
            color: #333333;

        }

        .head_return {
            display: inline-block;
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 23px;
            background: url("../addons/party_member/public/image/evaluation/return.png") no-repeat;
            background-size: 12px 23px;

        }

        .banner {
            position: relative;
            display: block;
            width: 100%;
            height: 200px;
            background: url("../addons/party_member/public/image/activities/acbg.png") no-repeat;
            background-size: 100% 200px;
        }

        .banner_info span {
            display: block;
            margin: auto;
            color: #ffffff;
        }

        .table_main {
            display: block;
            margin-top: 10px;
            width: 100%;
            height: auto;
        }

        .table_head span {
            display: inline-block;
            position: absolute;
            left: 0;
            height: 20px;
            border-left: 5px solid red;
            padding-left: 10px;
            color: #a7a7a7;
        }

        .star_pic span {
            display: inline-block;
            margin: auto;
            width: 20px;
            height: 20px;
            background: url(../addons/party_member/public/image/evaluation/star.png) no-repeat;
            background-size: 20px 20px;
        }

        .more_info span {
            display: inline-block;
            width: 13px;
            height: 9px;
            background: url(../addons/party_member/public/image/evaluation/more_btn.png) no-repeat;
            background-size: 13px 9px;
        }

        .weui_cell_ft {
            text-align: right;
            color: #888;
            float: right;
            margin: 0 5px;
        }

        .weui_cell_ft:after {
            content: " ";
            display: inline-block;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            height: 13px;
            width: 13px;
            border-width: 2px 2px 0 0;
            border-color: #c8c8cd;
            border-style: solid;
            position: relative;
            margin-left: .3em;
        }

        h4 {
            display: inline-block;
        }

        .weui-bar__item--on:after {
            content: " ";
            position: absolute;
            bottom: 0;
            top: 100%;
            width: 80%;
            right: 10%;
            height: 1px;
            border-top: 3px solid red;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            left: 10%;

        }

        .weui-bar__item--on:before {
            content: " ";
            position: absolute;
            bottom: 0;
            top: 100%;
            width: 80%;
            right: 10%;
            height: 1px;
            border-top: 3px solid red;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            left: 10%;

        }
    </style>
</head>
<body>
<div class="head">
    <span class="head_return"></span>
    优榜样
</div>
<div class="banner"></div>
<div class="table_main">

    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">

            {loop $data['list'] $index $item}

            <div class="weui-panel__bd" style="border-bottom: 1px solid #cccccc">
                <a href="{php echo $this->createMobileUrl('PatternDetail',array('id'=>$item['id']))}"
                   class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd" style="width:25%;height:25%;">
                        <img class="weui-media-box__thumb" src="{$item['photo']}">
                    </div>
                    <div class="weui-media-box__bd">
                        <div style="display: inline-block;">
                            <!--                            <div >
                                                            {$item['name']}
                                                        </div>-->
                            <div class="xhtml" style="display: none; width: 0;height: 0;">
                                <textarea>{$item['story']}</textarea>
                            </div>
                            <div style="width: 100%;height: 160px;overflow: hidden;text-overflow: ellipsis;overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ">

                            </div>
                            <p style="margin-top: 10px">{$item['date']}</p>
                        </div>
                        <!--<div class="weui-media-box__title">
                            2017.5.30
                            <span class="weui_cell_ft"></span>
                        </div>-->
                    </div>
                </a>

            </div>

            {/loop}

        </div>
    </div>


</div>
<script>
    $(function () {
        $(".xhtml").each(function (index, element) {
            var text = $(element).find("textarea").val();
            $(element).next().text($(text).text())
        })
    })
</script>
</body>
</html>